<template>
  <div class="item-detail flex column">
    <div class="item-title">商品合辑</div>
    <div class="item-content scroll">
      <Form :model="detailData" :label-width="80">
        <FormItem label="主标题">
          <div class="input-wrapper">
            <Input style="width: 200px;" v-model="detailData.label_name_cn" placeholder="请输入主标题"></Input>
          </div>
        </FormItem>
        <FormItem label="副标题">
          <div class="input-wrapper">
            <Input style="width: 200px;" v-model="detailData.label_info_summary" placeholder="请输入副标题"></Input>
          </div>
        </FormItem>
        <FormItem label="添加图片">
          <div class="input-wrapper" style="width: 200px;">
          	<div class="input-file-wrapper">
                <img :src="detailData.json[0].image_url" />
                <input type="file" accept="image/*" @change='handleFileChange'></input>
            </div>
            <p>建议尺寸1340*680</p>
          </div>
        </FormItem>
        <FormItem label="文本">
          <div class="input-wrapper">
            <Input style="width: 200px;" v-model="detailData.json[0].title" placeholder="请输入文本"></Input>
          </div>
        </FormItem>
        <template v-if="detailData.json[0] && detailData.json[0].more">
        	<FormItem label="开启更多">
	  	      <div class="flex center">
	  	        <Select v-model="detailData.json[0].more.display" @on-change="changeSwitch" class="select-wrapper">
	  	          <Option value="false">关闭</Option>
	  	          <Option value="true">开启</Option>
	  	        </Select>
	  	      </div>
	 	    </FormItem>
        </template>
        
  	    <template v-if="detailData.json[0] && detailData.json[0].more && detailData.json[0].more.display=='true' " >
  	    	<FormItem label="跳转类型">
  	          <div class="flex center">
  	            <Select v-model="detailData.json[0].skip_type" @on-change="chageSel" class="select-wrapper">
  	              <Option value="good">商品</Option>
  	              <Option value="label">微页面</Option>
  	            </Select>
                <div class="input-wrapper">
                   <Input style="width: 200px;" v-model="detailData.json[0].skip_url" @click.native="tapInput(1)" placeholder="请输入商品ID或微页面ID"></Input>
                </div>
  	           
  	          </div>
  	        </FormItem>
  	    </template>
  	    <FormItem label="商品排序">
  	      <div class="flex center">
  	        <Select v-model="detailData.json[0].sort" class="select-wrapper">
  	          <Option :value=0>手动添加排序</Option>
  	          <Option :value=1>自动排序</Option>
  	        </Select>
  	      </div>
  	    </FormItem>
        <div v-if="detailData.json[0].sort == 0">
          <FormItem label="" >
            <div class="flex center">
              <Button type="primary" @click="addGood">添加商品</Button>
            </div>
          </FormItem>
          <div class="goods-item-wrapper">
            <draggable v-model="detailData.json[0].goods_list" :options="dragOption">
              <transition-group>
                <div class="goods-item flex center between" v-for="(item,index) in detailData.json[0].goods_list" :key="'gooditem'+index">
                  <div class="flex center">
                    <img class="good-item-img" :src="item.style_image" alt="" />
                    <span>{{item.goods_title}}</span>
                  </div>
                  <div class="icon-wrapper" @click="delGoods(index)">
                    <Icon type="ios-trash-outline" />
                  </div>
                </div>
              </transition-group>
            </draggable>
          </div>
        </div>
        
      </Form>
    </div>

    <!-- 商品选择器 -->
    <goodsSelect buyMode="-9" @confirm="commitGoodsFn" :selectNum="1" ref="goodsModal" :goodsIdStr="goodsIdStr"></goodsSelect>
    <goodsSelect buyMode="-9" @confirm="commitGoodsFn2"  ref="goodsModal2" ></goodsSelect>
    
    <!-- 微页面选择器 -->
     <micropage-select ref="micropageModal" @confirm="chosePages"></micropage-select>
   
  </div>
</template>
<script>

import { uploadImage } from 'api/uploadImage'

import draggable from 'vuedraggable'

// 商品选择器组件
import goodsSelect from 'base/goods-select/goods-select'

// 微页面选择器组件
import MicropageSelect from 'base/micropage-select/micropage-select'

export default {
  name: 'GoodsAlbumDetail',
  props: {
    /**
     * @description 起始值，即动画开始前显示的数值
     */
    detailData: {
      
    },
  },
  data() {
    return {
      // 裁剪图片索引
      cropIndex: 0,
      // 跳转索引
      jumpIndex: 0,
	   }
  },
  computed: {
    goodsIdStr: function () {
      return this.detailData.json[0].skip_url;
    }
  },
  methods: {

    tapInput(selectNum) {
    	this.selectNum = selectNum;
      if (selectNum == 0) {
        this.openGoodsSelectFn();
      } else {
        if (this.detailData.json[0].skip_type == "good") {
          this.openGoodsSelectFn();
        } else {
        // 打开微页面选择器
        this.$refs.micropageModal.show();
      }
      }
  		
    },

    changeSwitch() {
      if (this.detailData.json[0].more.display == "false") {
        this.detailData.json[0].path = "";
        this.detailData.json[0].skip_url = "";
        this.detailData.json[0].skip_type = "";
      }

    },

    // 打开跳转商品选择器
    openGoodsSelectFn(){
        this.$refs.goodsModal.show();
    },

    // 选中跳转商品回调
    commitGoodsFn(_id){
       this.detailData.json[0].skip_url = _id;
       this.detailData.json[0].path = "app/mall/item/item?goodsId="+_id;
    },

    // 选中添加商品回调
    commitGoodsFn2(_id,shops) {
      for (var i=0; i< shops.length; i++) {
        var shop = {};
        shop.goods_id = shops[i].goods_id;
        shop.goods_title = shops[i].goods_title;
        shop.goods_summary = shops[i].goods_summary;
        shop.style_image = shops[i].image_path;
        shop.price_quarter = shops[i].goods_style[0].price_quarter;
        shop.price_market = shops[i].goods_style[0].price_market;
        this.detailData.json[0].goods_list.push(shop);
      }
    },

     // 选中微页面回调
    chosePages(ids) {
        this.detailData.json[0].skip_url = ids[0];
        this.detailData.json[0].path = "app/mall/label/label?labelId="+ids[0];
    },
   
    // 处理图片
    handleFileChange (event) {
      var that = this;
      uploadImage(event.target.files[0]).then(imgUrl => {
          that.detailData.json[0].image_url = imgUrl;
      }).catch(err => {
          that.$Message.error(err);  
      })  
    },

    // 添加
    addGood(){
    	this.$refs.goodsModal2.show();
    },

    /*
    * 选择器
    */
    chageSel(_item){
      this.detailData.json[0].skip_url = "";
    },

    // 删除轮播
    delGoods(index) {
      this.$Modal.confirm({
          title: '提示',
          content: "确定要删除该商品吗？",
          onOk: () => {
            this.detailData.json[0].goods_list.splice(index,1);
          }
      });
    },
    
  },
  
  components: {
  	goodsSelect,MicropageSelect,draggable
  }
}

</script>

<style scoped>
@import url("../baseModule.less");

.item-content {
	padding: 16px;
}

.content-edit {
	flex: 1;
	padding: 16px 16px 16px 24px;
	padding-top: 0;
}
.img-wrapper {
	width: 82px;
    height: 82px;
    padding: 5px;
    border: 1px solid #f2f2f2;
}
.content-item {
	padding: 16px 0;
    border-top: 1px solid #f2f2f2;

}
.form-wrapper {
    margin: 0 16px 0 12px;
    flex: 1;
}

/*上传图片控件*/

.input-file-wrapper {
	width: 100%;
	height: 100%;
	position: relative;
}
.input-file-wrapper img {
	width: 100%;
	height: 100%;
}
.input-file-wrapper input {
	position: absolute;
	left: 0;
	width: 100%;
	bottom: 0; top: 0;
	opacity: 0;
}
.icon-wrapper {
	min-width: 50px;
    width: 50px;
    height: 50px;
    background: #f2f2f2;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
	justify-content: center;
}

select {
    height: 34px;
    width: 80px;
    margin-right: 8px;
    padding-left: 6px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.select-wrapper {
	width: 120px;
}

.goods-item {
  padding: 10px;
}
.goods-item:hover {
  cursor: move;
}

.good-item-img {
  width: 100px;
  height: 75px;
  background: lightgray;
  margin-right: 10px;
}

.goods-item-wrapper {
  border-top: 1px solid #f2f2f2;
}
</style>
